<template>
  <div class="dataitem-box">
    <Title title="生长环境数据（当前批次）" />
    <div class="title-con fl-wrap">
      <el-select v-model="facilityNo" placeholder="选择设施" class="w100p" @change="queryDataItem">
        <el-option
          v-for="(item, index) in facilityArr"
          :key="index"
          :label="item.facilityName"
          :value="item.facilityNo"
        />
      </el-select>
      <el-carousel :autoplay="false">
        <el-carousel-item v-for="(kit, indexk) in conList" :key="indexk">
          <li v-for="(key, index) in kit" :key="index + 'data'" class="dataItem-li">
            <img :src="key.src ? key.src : ''" alt />
            <div>
              <p>
                {{ key.lastValue1
                }}{{ key.symbol && key.symbol !== "无" ? key.symbol : "" }}
              </p>
              <p>{{ key.dataItemName }}</p>
            </div>
          </li>
        </el-carousel-item>
      </el-carousel>
    </div>
    <img src="~@/assets/conservation-model/lin1.png" class="bottom-img" alt />
  </div>
</template>

<script>
import Title from "@/components/Title/index";
import configurationApi from "@/api/digital-production/conservation-model/configuration/index";
export default {
  components: { Title },
  props: {},
  data() {
    return {
      dataItemList: [
        // {
        //   dataItemName: "温度",
        //   value: '39.5',
        //   symbol: "℃",
        //   src: require("@/assets/conservation-model/temperature.png")
        // },
        // {
        //   dataItemName: "湿度",
        //   value: '23.2',
        //   symbol: "%RH",
        //   src: require("@/assets/conservation-model/humidity.png")
        // },
        // {
        //   dataItemName: "光照度",
        //   value: '27341',
        //   symbol: "Lux",
        //   src: require("@/assets/conservation-model/sun.png")
        // },
        // {
        //   dataItemName: '含氧量',
        //   value: '2.49',
        //   symbol: 'mg/L',
        //   src: require("@/assets/conservation-model/O2.png")
        // }
      ],
      conList: [],
      facilityNo: "",
      facilityArr: []
    };
  },
  methods: {
    // 环境数据
    async queryDataItem(e) {
      let dataItemList = [];
      if (e) {
        const { data: DataItem } = await configurationApi.queryDataItem({
          visible: true,
          facilityNo: e
        });
        let list = DataItem.map(item => item.dataItemId);
        const { data: CollectNew } = await configurationApi.queryCollectNew(
          list
        );
        // .then((res) => {
        //   if (res.code === 1) {
        let data = CollectNew || {};
        dataItemList = data || [];
        this.getData(dataItemList, 4);
        //   } else {
        //     this.$message.error("查询失败");
        //   }
        // });
      } else {
        this.getData(dataItemList, 4);
      }
    },
    getData(data, n) {
      if (data.length > 0) {
        data.forEach(element => {
          if (element.unitName === "摄氏度") {
            element.src = require("@/assets/conservation-model/temperature.png");
          } else if (element.unitName === "相对湿度") {
            element.src = require("@/assets/conservation-model/humidity.png");
          } else if (element.unitName === "勒克斯") {
            element.src = require("@/assets/conservation-model/sun.png");
          } else if (element.unitName === "ph值") {
            element.src = require("@/assets/conservation-model/ph.png");
          } else if (element.unitName === "PH") {
            element.src = require("@/assets/conservation-model/ph.png");
          } else if (element.unitName === "含氧量") {
            element.src = require("@/assets/conservation-model/O2.png");
          } else if (element.unitName === "二氧化碳") {
            element.src = require("@/assets/conservation-model/CO2.png");
          } else if (element.dataTypeName === "空气温度") {
            element.src = require("@/assets/conservation-model/temperature.png");
          } else if (element.dataTypeName === "空气湿度") {
            element.src = require("@/assets/conservation-model/humidity.png");
          } else if (element.dataTypeName === "光照度") {
            element.src = require("@/assets/conservation-model/sun.png");
          } else if (element.dataTypeName === "酸碱度") {
            element.src = require("@/assets/conservation-model/ph.png");
          } else if (element.dataTypeName === "PH") {
            element.src = require("@/assets/conservation-model/ph.png");
          } else if (element.dataTypeName === "含氧量") {
            element.src = require("@/assets/conservation-model/O2.png");
          } else if (element.dataTypeName === "二氧化碳") {
            element.src = require("@/assets/conservation-model/CO2.png");
          } else {
            element.src = require("@/assets/conservation-model/humidity.png");
          }
        });
        this.traverList(data, n);
      } else {
        this.traverList(this.dataItemList, n);
      }
    },
    queryFacilityData(data) {
      this.facilityArr = data;
      if (this.facilityArr[0]) {
        this.facilityNo = this.facilityArr[0].facilityNo;
        this.queryDataItem(this.facilityNo);
      }
      // console.log(data)
    },
    traverList(arr, n) {
      // 拆分数组(轮播图格式)
      var list = [];
      for (let i = 0; i < arr.length; i += n) {
        list.push(arr.slice(i, i + n));
      }
      this.conList = list;
    }
  }
};
</script>

<style lang="scss" scoped>
.dataitem-box {
  height: 100%;
  width: 100%;
  position: relative;
  .bottom-img {
    position: absolute;
    bottom: 0;
    height: 1px;
    width: 100%;
  }
}

::v-deep .el-carousel__container {
  height: 100%;
  width: 100%;
}
::v-deep .el-carousel {
  height: 80%;
  width: 100%;
  .el-carousel__item {
    display: flex;
    flex-flow: row wrap;
    place-content: flex-start;
  }
}
::v-deep .el-carousel__indicators--horizontal {
  display: none;
}

.dataItem-li {
  width: 50%;
  height: 50%;
  // float: left;
  display: flex;
  flex-direction: column;
  align-items: center;
  > img {
    height: 40px;
    width: auto;
    margin-bottom: 10px;
  }
  > div {
    height: 70px;
    width: 96%;
    background-image: url("~@/assets/conservation-model/data-line.png");
    background-size: 90% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
  }
  p {
    text-align: center;
    color: #fff;
    font-size: 14px;
    margin: 5px 0;
    // white-space: nowrap;
    &:nth-child(1) {
      font-size: 20px;
      font-weight: 600;
    }
  }
}
.fl-wrap {
  display: flex;
  flex-wrap: wrap;
}
</style>
